<template>
  <div class="farmtypeselectmain">
    <div v-for="(item,index) in FarmTypeSelectList" :key="item.farmingTypeNo" class="farmtypeselect" :class="index ===farmtypeactive? 'isfarmtypeselect':'notfarmtypeselect'" @click="farmtypeactive=index">
      {{ item.farmingTypeName }}
    </div>
    <!-- 农业类型选择 -->
  </div>
</template>
<script>
import { setToken, getToken } from '@/utils/auth'
export default {
  data() {
    return {
      farmtypeactive: 0,
      FarmTypeSelectList: [
        // { farmingTypeNo: 99, farmingTypeName: "大鹏种植" }
      ]
    }
  },
  watch: {
    farmtypeactive(newvalue) {
      this.setfarmtypeid(newvalue)
    }
  },
  mounted() {
    this.setfarmtypeid(0)
    this.FarmTypeSelectList = JSON.parse(getToken("farmingTypelist"));
  },
  methods: {
    setfarmtypeid(i) {
      setToken('farmingTypeNo', this.FarmTypeSelectList[i]['farmingTypeNo'])
      this.$emit('chancefarmtype', this.FarmTypeSelectList[i]['farmingTypeNo'])
    }
  }
}
</script>
<style lang="scss" scoped>
.farmtypeselectmain{
  width: 100%;
  height: 50px;
  // background-color: aqua;
  display: flex;
  color: azure;
  font-size: 15px;
  font-weight: 600;
}
.farmtypeselect{
  position: relative;
  width: 100px;
  border: azure 1px solid;
  cursor:pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.isfarmtypeselect{
  color: #507543;
  height: 49px;
  background-color: azure;
}
.notfarmtypeselect{
  top: 9px;
  height: 40px;
}
</style>
